<script>
import E from "wangeditor";
import {translate_zh_en_ru} from "@/components/utils/useUtils";
import translate_large_model from "@/components/utils/translate_large_model";

export default {
  name: "richTextTranslate",
  props: {
    // 正确写法：指定 type
    languageS: {
      type: String,  // 必须是构造函数
      default: ''    // 默认值可选
    },
    // 正确写法：对象类型的 prop
    richTextTranslateData: {
      type: Object,  // 必须是构造函数
      default: () => ({  // 对象/数组默认值必须用函数返回
        zh: '',
        en: '',
        ru: ''
      })
    }
  },
  data() {
    return {
      //忙加载的控制变量
      loading:false,
      //弹窗标题的变量
      titleMessage:'',
      //tabs的名字变量
      tabName:'chinese',
      //富文本的变量
      russianEditor:null,
      englishEditor:null,
      chineseEditor:null,

      //设置语言
      tabs_chinese:'中文',
      tabs_english:'英文',
      tabs_russian:'俄文',

      main:{
        wait:'翻译中...请稍后'
      },

      //控制显示用了那个翻译
      sucAiData:0,
      sucData:0,

      //提示翻译的弹窗
      dialogVisible:false
    }
  },
  methods:{
    //doe：1.代表普通普通翻译；2.代表Ai翻译
    translate(doe){
      // 翻译前禁用所有编辑器
      this.disableAllEditors();
      this.loading=true
      if (this.languageS==='chinese'){
        this.titleMessage='翻译中'
      }
      else if (this.languageS==='english'){
        this.titleMessage='Translating'
      }
      else if (this.languageS==='russian'){
        this.titleMessage='Перевод'
      }
      this.dialogVisible=true
      //是普通翻译
      if (doe===1){
        if (this.tabName==='chinese'){
          translate_zh_en_ru(this.chineseEditor.txt.html(),'zh',2).then(data=>{
            this.englishEditor.txt.html(data.en)
            this.russianEditor.txt.html(data.ru)
            // 翻译完成后启用
            this.enableAllEditors();
            this.sucData=1
            this.sucAiData=0
            this.loading=false
            this.dialogVisible=false
          })
        }
        else if (this.tabName==='english') {
          //判断用户在那个tab上，确定是那个语言
          // 创建包含两个翻译请求的Promise数组
          // 中文翻译
          translate_zh_en_ru(this.englishEditor.txt.html(), 'en', 2).then(data => {
            this.russianEditor.txt.html(data.ru)
            this.chineseEditor.txt.html(data.zh)
            // 翻译完成后启用
            this.enableAllEditors();
            this.sucData=1
            this.sucAiData=0
            this.loading=false
            this.dialogVisible=false
          })
        }
        else if (this.tabName==='russian'){
          //判断用户在那个tab上，确定是那个语言
          translate_zh_en_ru(this.russianEditor.txt.html(), 'ru', 2).then(data => {
            this.englishEditor.txt.html(data.en)
            this.chineseEditor.txt.html(data.zh)
            // 翻译完成后启用
            this.enableAllEditors();
            this.sucData=1
            this.sucAiData=0
            this.loading=false
            this.dialogVisible=false
          })
        }
      }
      //是用AI大模型翻译
      if (doe===2){
        if (this.tabName==='chinese'){
          translate_large_model(this.chineseEditor.txt.html(),'zh',2).then(data=>{
            this.englishEditor.txt.html(data.en)
            this.russianEditor.txt.html(data.ru)
            // 翻译完成后启用
            this.enableAllEditors();
            this.sucData=0
            this.sucAiData=1
            this.loading=false
            this.dialogVisible=false
          })
        }
        else if (this.tabName==='english') {
          //判断用户在那个tab上，确定是那个语言
          // 创建包含两个翻译请求的Promise数组
          translate_large_model(this.englishEditor.txt.html(), 'en', 2).then(data => {
            this.russianEditor.txt.html(data.ru)
            this.chineseEditor.txt.html(data.zh)
            // 翻译完成后启用
            this.enableAllEditors();
            this.sucData=0
            this.sucAiData=1
            this.loading=false
            this.dialogVisible=false
          })
        }
        else if (this.tabName==='russian'){
          //判断用户在那个tab上，确定是那个语言(为了上传）
          translate_large_model(this.russianEditor.txt.html(), 'ru', 2).then(data => {
            this.englishEditor.txt.html(data.en)
            this.chineseEditor.txt.html(data.zh)
            // 翻译完成后启用
            this.enableAllEditors();
            this.sucData=0
            this.sucAiData=1
            this.loading=false
            this.dialogVisible=false
          })
        }
      }
    },

    //辅助函数：  初始化 wangEditor
    initEditor(editorKey, refName, htmlVal) {
      // 销毁已有实例
      if (this[editorKey]) {
        this[editorKey].destroy();
        this[editorKey] = null;
      }

      const container = this.$refs[refName];
      if (!container) return;

      // 创建新实例
      this[editorKey] = new E(container);

      // 配置菜单
      this[editorKey].config.menus = [
        'head',
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'foreColor',
        'backColor',
        'list',
        'justify',
        'table'
      ];
      // 自定义颜色配置（关键修改）
      this[editorKey].config.colors = [
        '#000000', // 默认黑色
        '#FF0000', // 亮红色
        '#00FF00', // 绿色
        '#0000FF', // 蓝色
        '#FF00FF', // 粉色
        '#FFA500', // 橙色
        '#FFFF00', // 黄色
      ];


      this[editorKey].create();
      this[editorKey].txt.html(htmlVal)

      // 关键：添加内容变化监听
      this[editorKey].config.onchange = () => {
        // 给父窗口传递数据
        // 触发Vue自定义事件向父组件传递数据

        //组合一个临时变量，给父窗口传回去
        let args={
          zh:'',
          en:'',
          ru:''
        }
        if (this.englishEditor.txt.html()==='' || this.englishEditor.txt.html()===null || this.englishEditor.txt.html()===undefined){
          args.en='English not filled in'
        }
        else {
          args.en=this.englishEditor.txt.html()
        }
        if (this.chineseEditor.txt.html()==='' || this.chineseEditor.txt.html()===null || this.chineseEditor.txt.html()===undefined){
          args.zh='中文未填写'
        }
        else {
          args.zh=this.chineseEditor.txt.html()
        }
        if (this.russianEditor.txt.html()==='' || this.russianEditor.txt.html()===null || this.russianEditor.txt.html()===undefined){
          args.ru='Китайский не заполнен'
        }
        else {
          args.ru=this.russianEditor.txt.html()
        }
        //对于没有填写的，给一个预设值
        this.$emit('content-change', args);
      }
    },
    //禁止使用富文本
    disableAllEditors() {
      ['chineseEditor','englishEditor','russianEditor'].forEach(key => {
        this[key]?.disable();
      });
    },
    //开始使用富文本
    enableAllEditors() {
      ['chineseEditor','englishEditor','russianEditor'].forEach(key => {
        this[key]?.enable();
      });
    }
  },
  mounted() {
    //设置语言：
    if (this.languageS==='chinese'){
      this.tabs_chinese='中文'
      this.tabs_english='英文'
      this.tabs_russian='俄文'
      this.main.wait='翻译中...请稍后'
    }
    else if (this.languageS==='english'){
      this.tabs_chinese='Chinese'
      this.tabs_english='English'
      this.tabs_russian='Russian'
      this.main.wait='Translating...Please wait a moment'
    }
    else if (this.languageS==='russian'){
      this.tabs_chinese='китайский'
      this.tabs_english='английский'
      this.tabs_russian='русский'
      this.main.wait='Перевод...Пожалуйста, подождите минутку'
    }
  this.$nextTick(() => {
    this.initEditor('chineseEditor', 'chineseEditor', this.richTextTranslateData.zh);
    this.initEditor('englishEditor', 'englishEditor', this.richTextTranslateData.en);
    this.initEditor('russianEditor', 'russianEditor', this.richTextTranslateData.ru);
  })
  }
}
</script>
<template>
  <div>
    <div>
      <div>
        <el-tabs v-model="tabName" type="card" v-loading="loading" >
          <el-tab-pane :label="tabs_chinese" name="chinese">
            <div ref="chineseEditor"
                 style="text-align: left; overflow-y: auto;width: 100%">
            </div>
          </el-tab-pane>
          <el-tab-pane :label="tabs_english" name="english">
            <div ref="englishEditor"
                 style="text-align: left; overflow-y: auto;width: 100%">
            </div>

          </el-tab-pane>
          <el-tab-pane :label="tabs_russian" name="russian">
            <div  ref="russianEditor"
                  style="text-align: left; overflow-y: auto;width: 100%">
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="margin-top: 10px;text-align: right">

        <el-button type="info" icon="el-icon-check" circle size="mini" v-if="sucData===0"></el-button>
        <el-button type="success" icon="el-icon-check" circle size="mini" v-if="sucData===1"></el-button>
        <el-button @click="translate(1)" size="small" style="width: 200px">翻译|Translate|Перевод</el-button>

        <el-button type="info" icon="el-icon-check" circle size="mini" v-if="sucAiData===0"></el-button>
        <el-button type="success" icon="el-icon-check" circle size="mini" v-if="sucAiData===1"></el-button>
        <el-button @click="translate(2)" size="small" style="width: 200px">AI翻译|AI Translation|AI Перевода</el-button>
      </div>
    </div>

    <!--翻译的弹窗-->
    <el-dialog
        :title="titleMessage"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
        append-to-body>
      <span>{{main.wait}}</span>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>